<h1>Getting Started</h1>
<p>Trongate CSS is contained within a single CSS file named '<b>trongate.css</b>'. This file is located in:</p>
[code]public/ 
  css/ 
    trongate.css 
[/code]

<h2>Basic Usage</h2>
<p>Trongate CSS comes with every new installation of Trongate. Getting up and running with Trongate CSS is easy!</p>
<p>Let's assume your starting point is a webpage (within a Trongate application) containing the following source code:</p>
[code=html]
&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
  &lt;meta charset="UTF-8"&gt;
  &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
  &lt;title&gt;Document&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
   &lt;h1&gt;Hello, Trongate CSS!&lt;/h1&gt;
&lt;/body&gt;
&lt;/html&gt;
[/code]

<p class="mt-3"><b>Step 1: </b> Add a <code>&lt;base&gt;</code> element to the <code>&lt;head&gt;</code> section of your webpage with the 'href' attribute set to your application's base URL:</p>
[code=html]
&lt;base href="&lt;?= BASE_URL ?&gt;"&gt;
[/code]

<div class="alert alert-info">
  <p>The <code>BASE_URL</code> constant is defined inside the file '<b>config.php</b>'. This constant should be set to a website address pointing to the homepage of your web application.</p>

  <p>The <b>config.php</b> file is located in:</p>
  [code]public/ 
    config/ 
      config.php 
  [/code]
</div>

<p class="mt-3"><b>Step 2: </b> Load the Trongate CSS stylesheet onto your webpage by adding the following new line of code to the <code>&lt;head&gt;</code> section:</p>
[code=html]&lt;link rel="stylesheet" href="css/trongate.css"&gt;[/code]

<div class="alert alert-info">
  <p class="mt-0">After completing the steps above, Trongate CSS will automatically style your HTML elements without requiring additional classes or configuration.</p>
</div>

<h2>Boilerplate HTML</h2>
<p>The HTML code below demonstrates a basic, reusable template containing the essential structure and elements needed to start working with Trongate CSS:</p>

[code=html]
&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
  &lt;base href="&lt;?= BASE_URL ?&gt;"&gt;
  &lt;meta charset="UTF-8"&gt;
  &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
  &lt;link rel="stylesheet" href="css/trongate.css"&gt;
  &lt;title&gt;Document&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
   &lt;h1&gt;Hello, Trongate CSS!&lt;/h1&gt;
&lt;/body&gt;
&lt;/html&gt;
[/code]
